<template>
    <div class="container">
        <h1>{{ inst.title }}</h1>
        <hr class="hr" />
        <span class="link" @click="goHome">HOME</span>/
        <span class="link">{{ inst.category.title }}</span>
        <tag
            type="primary"
            @click="goTagArticle(item)"
            v-for="(item, idx) in inst.tags"
            :key="idx"
            class="tag"
        >
            {{ item.title }}</tag
        >
        <hr class="hr" />
        <div v-html="inst.content"></div>
    </div>
</template>

<script setup>
import router from "@/router";
import { get } from "@/util/request.js";
import { Tag } from "ant-design-vue";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";

const id = ref(0);
const inst = ref({ title: "", content: "", category: { title: "" } });

onMounted(() => {
    const route = useRoute();
    id.value = route.query.id;
    getData();
});

const goHome = () => {
    router.push({ name: "home" });
};

const goTagArticle = (inst) => {
    router.push({ name: "tag-article", query: { id: inst.id } });
};

const getData = () => {
    get("/article/find?id=" + id.value).then((resp) => {
        inst.value = resp.inst;
    });
};
</script>

<style scoped>
.container {
    padding: 11px;
    font-size: 18px;
    line-height: 32px;
}

h1 {
    line-height: 1.4em;
}

.hr {
    margin: 10px 0;
}

.tag {
    cursor: pointer;
    margin-right: 5px;
}
</style>
